import React, { Component } from 'react'
import axios from "./utils/axios"

// 引入 
import Header from './components/Header'
import Main from './components/Main'

export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       list:[], //全部数据
       newArr:[], //搜索后的数据
    }
  }

  // 请求数据 
  componentDidMount() {
    axios.get("/api/list").then( res => {
      this.setState({
        list:res.data
      })
      // console.log(res.data);
    })
  }

  // 搜索 
  searchFn(value) {
    let { list, newArr} = this.state;
    newArr = list.filter( item => {
      return item.name.includes(value);
    })

    // 重新赋值 
    this.setState({
      newArr:newArr
    })
    console.log(newArr);
  }

  render() {
    const { list } = this.state;
    return (
      <div className='App'>
        <Header searchFn={this.searchFn.bind(this)}></Header>
        <Main list={list}></Main>
      </div>
    )
  }
}

export default App